{% extends 'base.html' %}
{% block title %} Notebook {% endblock %}
{% block head %}
<script src="src/notebook.js"> </script>
{% endblock %}
{% block body %}
<div class="ui stackable centered column">
	<div class="">
		<button id="add-new-note-button" class="ui teal labeled icon button"><i class="plus icon"></i> 添加条目 </button>
		<div class="ui left pointing label" style="display:none"> 已添加 </div>
	</div>

	<script id="noteTemplate" type="text/html">
		<div id="note-<%=t.id%>" style="margin-top: 20px">
			<div class="ui block top attached header" style="padding-left: 0.5rem; padding-right: 0.5rem">
				<div class="ui container" style="width: 100%">
					<div class="content" style="font-size: 18px; font-weight: 400; text-overflow: ellipsis; margin-left: 10px">
						<%=t.title%>
					</div>
					<div class="ui medium compact right floated icon buttons" style="position: relative; top: -6px;">
						<button class="ui button" onclick="$('#note-<%=t.id%>-form').slideToggle('fast')"><i class="pencil alternate icon"></i></button>
						<button class="ui button" onclick="if(confirm('确认删除 <%=t.title%>?')){DeleteNote(<%=t.id%>)}	"><i class="trash alternate icon"></i></button>
					</div>
				</div>
			</div>
			<div class="ui bottom attached segment" style="margin-bottom: 2px;">
				<div class="content"> <%=t.description%> </div>
				<div class="content" style="margin-top: 4px; font-size: 16px"> <%=t.content%> </div>
			</div>
			<div id="note-<%=t.id%>-form" class="ui segment form" style="margin-top: 2px; display: none">
				<h3> 编辑 </h3>
				<input type="text" name="id" value="<%=t.id%>" style="display: none" />
				<div class="ui grid">
					<div class="ui fourteen wide column">
						<div class="ui labeled fluid input">
							<div class="ui label"> 标题 </div>
							<input type="text" name="title" value="<%=t.title%>" />
						</div>
					</div>
					<div class="ui two wide column" style="padding-left: 0px; ">
						<div class="ui fluid input">
							<input type="text" name="priority" placeholder="重要度" value="<%=t.priority%>" />
						</div>
					</div>
				</div>
				<div class="ui labeled fluid input" style="margin-top: 4px">
					<div class="ui label"> 描述 </div>
					<input type="text" name="description" value="<%=t.description%>" >
				</div>
				<div class="field" style="margin-top: 6px;">
					<label> 内容 </label>
					<textarea rows="10" name="content"><%=t.content%></textarea>
				</div>
				<button id="note-<%=t.id%>-submit-button" onclick="SubmitNote(<%=t.id%>)" class="ui blue labeled icon button"> <i class="save icon"></i> 保存 </button>
				<div class="ui left pointing label" style="display:none"> 已保存 </div>
			</div>
		</div>
	</script>
	<div id="notes-container">
	</div>

	<script> InitNotes() </script>
</div>
{% endblock body %}

<!--
	<div class="ui selection dropdown" style="min-width: unset">
		<input type="hidden" name="priority" />
		<i class="dropdown icon"></i>
		<div class="default text" style="font-size: 11px">重要性</div>
		<div class="menu">
			<div class="item" data-value="1000">置顶</div>
			<div class="item" data-value="0">0</div>
			<div class="item" data-value="1">1</div>
			<div class="item" data-value="2">2</div>
			<div class="item" data-value="3">3</div>
			<div class="item" data-value="4">4</div>
			<div class="item" data-value="5">5</div>
			<div class="item" data-value="6">6</div>
			<div class="item" data-value="7">7</div>
			<div class="item" data-value="8">8</div>
			<div class="item" data-value="9">9</div>
		</div>
	</div>
	-->
